<script setup lang="ts">
import { ref } from 'vue'

// 定义数组
const arrList = ref(['香蕉', '苹果', '菠萝'])
// 定义对象
const person = ref({
  name: 'lalal',
  age: 12
})
</script>

<template>
  <div class="app-page">
    <!-- 遍历数组 -->
    <ul>
      <li v-for="(item, index) in arrList" :key="index">索引：{{ index }} , 值：{{ item }}</li>
    </ul>
    <ul>
      <li v-for="item in arrList" :key="item">{{ item }}</li>
    </ul>
    <!-- 遍历对象 -->
    <ul>
      <li v-for="(item, key, index) in person" :key="index">
        索引：{{ index }} , 键：{{ key }}, 值：{{ item }}
      </li>
    </ul>
    <!-- 遍历数字 -->
    <ul>
      <li v-for="item in 20" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<style lang="css" scoped></style>
